<template>
  <div class="right">
    <!-- 智能水文监测 -->
    <data-box
      wd="29.375rem"
      class="hydrology-box"
      title="智能水文监测"
      :bg="box_header"
      he="3.0625rem"
    >
      <template slot="content">
        <div class="content-top">
          <div class="hydrology-item">
            <img
              class="icon"
              src="../../../assets/img/decisionAnalysis/anti_scour_icon.png"
              alt=""
            />
            <div class="middle">
              <span class="title">水文监测</span>
              <img
                class="arrow"
                src="../../../assets/img/decisionAnalysis/anti_scour_arrow.png"
                alt=""
              />
            </div>
            <div
              :class="
                hydrologyStatus == 0 ? 'hydrology-default' : 'hydrology-active'
              "
            >
              {{ hydrologyStatus == 0 ? "异常" : "正常" }}
            </div>
          </div>
        </div>
        <div class="content-bottom" style="margin-top: 2.5rem">
          <div class="grid-list">
            <div
              class="grid-item"
              v-for="(item, index) in hydrologyList"
              :key="index"
            >
              <img :src="item.icon" alt="" />
              <div class="desc">
                <span class="title">{{ item.title }}</span>
                <div class="data">
                  <span class="num">{{ item.num }}</span>
                  <span class="unit">{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <SubTitle
            style="margin-top: 2.1875rem"
            title="涌水/排水量"
            wd="100%"
            he="1.5rem"
          />
          <LineChart
            style="height: 11.4375rem; margin-top: 0.9375rem"
            class="chart"
            :chart-data="hydrologyChartData"
            :area="lineChartOption.area"
            :unit="lineChartOption.unit"
            :color="lineChartOption.color"
            :showLegend="true"
            :text="['智能水文监测']"
          />
        </div>
      </template>
    </data-box>

    <!-- 智能环保 -->
    <data-box
      :bg="box_header"
      he="3.0625rem"
      wd="29.375rem"
      class="ep-box"
      title="智能环保 "
    >
      <template slot="content">
        <div class="ep-list" v-for="(item, index) in epList" :key="index">
          <div class="left">
            <span class="title">{{ item.title }}</span>
          </div>
          <div class="right">
            <div class="top">
              <span class="top-title">{{ item.topTitle }}</span>
              <div class="data">
                <span class="num">{{ item.topNum }}</span>
                <span class="unit">{{ item.topUnit }}</span>
              </div>
            </div>
            <img
              class="line"
              src="../../../assets/img/decisionAnalysis/ep_line.png"
              alt=""
            />
            <div class="bottom">
              <span class="bottom-title">{{ item.bottomTitle }}</span>
              <div class="data">
                <span class="num">{{ item.bottomNum }}</span>
                <span class="unit">{{ item.bottomUnit }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </data-box>
  </div>
</template>

<script>
import DataBox from '../lib/dataBox.vue';
import SubTitle from '../lib/subTitle.vue';
import LineChart from '@/components/chart/cockpit/LineChart';

export default {
  name: 'DafosiControlWebRight',

  components: { DataBox, SubTitle, LineChart },

  data() {
    return {
      box_header: require('../../../assets/img/decisionAnalysis/box_header.png'),
      lineChartOption: {
        color: ['#00fdff', '#a2b9fd'],
        area: true,
        unit: 'm³'
      },
      hydrologyChartData: [
        { x: '12-01', y: 75, s: '涌水量' },
        { x: '12-01', y: 30, s: '排水量' },
        { x: '12-02', y: 60, s: '涌水量' },
        { x: '12-02', y: 37, s: '排水量' },
        { x: '12-03', y: 79, s: '涌水量' },
        { x: '12-03', y: 42, s: '排水量' }
      ],
      hydrologyStatus: 1,
      hydrologyList: [
        {
          icon: require('../../../assets/img/decisionAnalysis/water_flow_into.png'),
          num: 440,
          title: '瞬时涌水量',
          unit: 'm³/h'
        },
        {
          icon: require('../../../assets/img/decisionAnalysis/water_flow_out.png'),
          num: 12584,
          title: '今日排水量',
          unit: 'm³'
        }
      ],
      epList: [
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        },
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        },
        {
          title: '采区沉降',
          topTitle: '沉降面积',
          topNum: '78.99',
          topUnit: '公里',
          bottomTitle: '吨煤沉降率',
          bottomNum: '8.3',
          bottomUnit: '%'
        }
      ]
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
// 智能水文监测
.hydrology-box {
  .content-top {
    .hydrology-item {
      display: flex;
      align-items: center;

      .icon {
        width: 3.875rem;
        vertical-align: middle;
      }
      .middle {
        margin: 0rem 1.75rem 0rem 2.3125rem;
        .title {
          height: 0.875rem;
          font-size: 0.875rem;
          line-height: 1;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          letter-spacing: 0.0656rem;
        }
        .arrow {
          width: 10.9375rem;
          vertical-align: middle;
        }
      }
      .hydrology-default,
      .hydrology-active {
        height: 1.25rem;
        font-size: 1.25rem;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.0938rem;
      }
      .hydrology-active {
        color: #35ffc0;
      }
      .hydrology-default {
        color: #a2a7ba;
      }
    }
  }
  .content-bottom {
    .grid-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      .grid-item {
        display: flex;
        .desc {
          margin-left: 1.1875rem;
          .title {
            margin-top: 0.75rem;
            height: 0.875rem;
            font-size: 0.875rem;
            line-height: 1;
            font-family: PingFang SC, PingFang SC-Regular;
          }
          .data {
            margin-top: 0.75rem;
            .num {
              height: 1.5rem;
              font-size: 1.5rem;
              line-height: 1;
              font-family: Agency FB, Agency FB-Regular;
            }
            .unit {
              height: 0.75rem;
              font-size: 0.75rem;
              line-height: 1;
              margin-left: 0.4375rem;
              color: #b1b3b8;
              font-family: PingFang SC, PingFang SC-Regular;
            }
          }
        }
      }
      .grid-item:first-child {
        border-right: 1px dashed #4e5b6e;
      }
      .grid-item:last-child {
        justify-content: flex-end;
      }
    }
  }
}
// 智能环保
.ep-box {
  .ep-list {
    display: flex;
    justify-content: space-between;
    height: 6.5625rem;
    background-image: url("../../../assets/img/decisionAnalysis/ep_border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .left {
      margin: 1.5rem 2.9375rem 0.9375rem 1.0625rem;
      width: 7rem;
      height: 4.125rem;
      background-image: url("../../../assets/img/decisionAnalysis/ep_icon.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .title {
        height: 0.875rem;
        font-size: 0.875rem;
        width: max-content;
        line-height: 1;
        position: absolute;
        left: 50%;
        top: 25%;
        transform: translate(-50%, -50%);
      }
    }
    .right {
      margin-right: 2.625rem;
      display: flex;
      flex-direction: column;
      width: 13.5rem;
      img {
        width: 13.5rem;
      }
      .top,
      .bottom {
        height: 1.375rem;
        display: inline-flex;
        justify-content: space-between;
        align-items: flex-end;
      }
      .top-title,
      .bottom-title {
        height: 0.875rem;
        font-size: 0.875rem;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Medium;
      }
      .top {
        margin-top: 1rem;
        .data {
          color: #fedb80;
        }
      }
      .bottom {
        margin-top: 0.5625rem;
        .data {
          color: #00f6ff;
        }
      }
      .line {
        margin-top: 1rem;
      }
      .data {
        .num {
          height: 1.375rem;
          font-size: 1.375rem;
          line-height: 1;
          font-family: Agency FB, Agency FB-Regular;
        }
        .unit {
          height: 0.75rem;
          font-size: 0.75rem;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          margin-left: 0.5625rem;
        }
      }
    }
  }
  .ep-list:not(:first-child) {
    margin-top: 0.9375rem;
  }
  .ep-list:first-child {
    margin-top: 0.4688rem;
  }
}
</style>
